<template>
    <div class="personalDetails">
        <!-- <div class="goback" @click="goBack()">
            <img src="../../static/img/left_white.png" alt="">
        </div> -->
        <div class="banner">
            <div class="banner_con">
                <img :src="banner" class="banner_img" :class="hasBanner?'marginT':''" alt="">
            </div>
            <p class="header_img">
                <img :src="headerImg" alt="">
            </p>
        </div>
        <div class="echarts_box">
            <div class="echarts_box_top">
                <div class="echarts_swtich_box">
                    <!-- 周月切换按钮 -->
                    <!-- <p class="echarts_text">
                                <span v-html="echartsSwtich?'月':''" @click="selectMounth"></span>
                                <span v-html="!echartsSwtich?'周':''" @click="selectWeek"></span>
                            </p> -->
                    <!-- <div class="echarts_swtich">
                                <p :class="{pright:echartsSwtich}"></p>
                            </div> -->
                </div>
                <p class="echarts_title">票数:{{likeNum}}</p>
            </div>
            <div id="echartsBox"></div>
        </div>
        <div class="my_like_box" v-if="fromSwitch">
            <div class="my_like" v-show="myLikeList.length>0">
                <p class="my_like_title">
                    <span>关注的人</span>
                </p>
            </div>
            <ul class="before_three_box" v-if="fromSwitch">
                <li v-for="(item,index) in myNewLikeList" :key="index" @click="toPersonalDetails(item.id)" v-show="myNewLikeList.length>0">
                    <div class="my_info">
                        <div class="my_info_con">
                            <div class="my_info_l">
                                <p class="img_url">
                                    <img :src="item.headerImg" alt="">
                                </p>
                                <p class="my_info_l_r">
                                    <span class="my_info_l_r_t">{{item.user_nickname}}</span>
                                </p>
                            </div>
                            <div class="my_info_r">
                                <p class="link_num" :class="{yellow:item.vote_num>=900}">{{item.vote_num}}</p>
                                <img src="../../static/img/left-1.png" alt="" class="addLike_r">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="addLike" @click="addLike()" v-if="fromSwitch">
                    <div class="addLike_left">
                        <div class="addLike_left_box">
                            <div class="addLike_icon">
                                <p></p>
                                <p></p>
                            </div>
                        </div>
                        <p class="addLike_text">添加</p>
                    </div>
                    <img src="../../static/img/left-1.png" alt="" class="addLike_r">
                </li>
            </ul>
        </div>
        <div class="my_like_box my_like_box_one" v-show="!fromSwitch">
            <p class="add_one_like" @click="addLikeTo()">关注</p>
            <!-- <p class="add_one_like" @click="addLikeTo()" v-if="likeStatus">添加关注</p> -->
            <!-- <p class="add_one_like remove_one_like" v-else @click="removeLikeTo()">取消关注</p> -->
        </div>
        <div class="my_like_box" v-if="fromSwitch">
            <div class="my_like">
                <p class="my_like_title">
                    <span>已为我投票</span>
                </p>
            </div>
            <ul class="before_three_box">
                <li v-for="(item,index) in forVoterList" :key="index" @click="toPersonalDetails(item.id)" v-show="noForVoterList">
                    <div class="my_info">
                        <div class="my_info_con">
                            <div class="my_info_l">
                                <p class="img_url">
                                    <img :src="item.img_path" alt="">
                                </p>
                                <p class="my_info_l_r">
                                    <span class="my_info_l_r_t">{{item.user_nickname}}</span>
                                </p>
                            </div>
                            <div class="my_info_r">
                                <img src="../../static/img/left-1.png" alt="" class="addLike_r">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <p class="noVoter" v-show="!noForVoterList">暂时还没人为我投票</p>
        </div>
    </div>
</template>
<script>
    import wx from "weixin-js-sdk";
    import {
        weiXinConfig,
        weiXinShare
    } from "../assets/js/wxJsApi";
    export default {
        name: "personalDetails",
        data() {
            return {
                token: '',
                tokenParams: {},
                banner: '',
                defoultBanner: require('../../static/img/banner.jpg'),
                myUserInfo: localStorage.getItem("myUserInfo"),
                isSpokesman: false /*代言人页面进入 */ ,
                fromSwitch: false /*判断是自己的个人中心还是别人的个人中心*/ ,
                isJoin: false /*检测是否是活动参与人还是外来人员*/ ,
                likeNum: 0 /*票数 */ ,
                headerImg: "" /*头像*/ ,
                user_nickname: "" /* 用户姓名*/ ,
                declaration: "" /*用户简介 */ ,
                hasBanner:false,
                //   echartsSwtich: false,
                //   likeStatus: false /* 别人个人中心是否被自己关注状态*/,
                dataMounth: [],
                dataWeek: [],
                uid: "" /*个人信息id */ ,
                XDataMounth: [],
                XDataWeekBefore: [],
                XDataWeek: [],
                myLikeList: [
                    /*我关注的人数组 */
                ],
                myNewLikeList: [],
                forVoterList:[],/*获取哪些人给自己投票了 */
                noForVoterList:false,/*暂时没有人给自己投票了 */
            };
        },
        created() {
            if (this.$route.query.homeSpokesman) {
                this.isSpokesman = true;
            }
            this.getToken();
            this.getWhereFrom();
            this.initPersonalInfo();
            this.getVoteRecord();
            this.getBanner();
            this.getForVoter();
            // this.wxShare();
            // this.isQueryLike();
        },
        mounted() {
            let _self = this;
            setTimeout(function() {
                _self.drawEcharts(_self.dataWeek, _self.XDataWeek);
            }, 500);
        },
        watch: {
            $route(to, from) {
                this.$router.go(0);
            }
        },
        methods: {
            
            getToken() {
                if (localStorage.getItem("token")) {
                    this.token = localStorage.getItem("token")
                    this.tokenParams = {
                        token: localStorage.getItem("token")
                    }
                }
            },
            /*判断是自己的个人中心还是别人的个人中心*/
            getWhereFrom() {
                if (this.$route.query.myPersonalId) {
                    this.fromSwitch = true;
                    this.getFollowList();
                } else {
                    this.fromSwitch = false;
                }
            },
            /*获取哪些人给自己投票了 */
            getForVoter(){
                if (this.$route.query.myPersonalId) {
                    this.axios.post(this.APIHOST + "home/getVoter", {user_id:(JSON.parse(this.myUserInfo)).user_id }).then(r=>{
                        if(r.data){
                            if(r.data.data.length==0){
                                 this.forVoterList=[];
                                this.noForVoterList=false;
                            }else{
                                this.forVoterList=r.data.data;
                                this.noForVoterList=true;
                            }
                        }else{
                            this.forVoterList=[];
                            this.noForVoterList=false;
                        }
                        
                    }).catch(res=>{
                            this.forVoterList=[];
                            this.noForVoterList=false;
                    })
                }
            },
            /*检测是否是活动参与人还是外来人员*/
            // isSign() {
            //   if (/*参加活动了的人员*/
            //     this.myUserInfo &&
            //     this.myUserInfo.is_binding &&
            //     this.myUserInfo.is_binding !== 0
            //   ) {
            //     this.isJoin = true;
            //   } else {
            //     this.isJoin = false;
            //   }
            // },
            /*初始化个人信息 */
            initPersonalInfo() {
                if (this.$route.query.myPersonalId) {
                    this.uid = this.$route.query.myPersonalId;
                } else if (this.$route.query.personalId) {
                    this.uid = this.$route.query.personalId;
                }
                let userinfoParams = {
                    uid: this.uid,
                    token: this.token
                };
                this.axios
                    .post(this.APIHOST + "user/userinfo", userinfoParams)
                    .then(r => {
                        if (r.data.code == "0") {
                            this.headerImg = r.data.data.img_path;
                            this.user_nickname = r.data.data.user_nickname;
                            
                            this.declaration = r.data.data.declaration;
                            if(this.$route.query.homeSpokesman){/*代言人 */
                                this.likeNum = r.data.data.vote_num;
                            }else{
                                this.likeNum = r.data.data.vote_num_city;
                            }
                        }
                    });
            },
            // goBack() {
            //     if (this.$route.query.homeSpokesman) {
            //         this.$router.push({
            //             path: "/wx/homeSpokesman",
            //             query: {
            //                 homeSpokesman: 'homeSpokesman'
            //             }
            //         });
            //     } else {
            //         this.$router.push("/wx/home");
            //     }
            // },
            getBanner() {
                let bannerParams ='';
                if (this.$route.query.myPersonalId) {
                    bannerParams = {
                        user_id: (JSON.parse(localStorage.getItem('myUserInfo')).user_id)
                    };
                }else{
                    bannerParams = {
                        user_id:this.$route.query.personalId
                    };
                }
                this.axios.post(this.APIHOST + "home/getUserPic", bannerParams).then(r => {
                        if (r.data && r.data.code == '0') {
                            if (r.data.data && r.data.data !== '') {
                                this.banner = r.data.data;
                                this.hasBanner=false;
                            } else {
                                this.banner = this.defoultBanner;
                                this.hasBanner=true;
                            }
                        } else {
                            this.banner = this.defoultBanner;
                            this.hasBanner=true;
                            // this.$p_message(r.data.msg, "");
                        }
                    })
                    .catch(err => {
                        this.banner = this.defoultBanner;
                    })
            },
            /*关注列表 */
            async getFollowList() {
                await this.axios
                    .post(this.APIHOST + "user/followList", this.tokenParams)
                    .then(r => {
                        if (r.data && r.data.code == 0) {
                            this.myLikeList = r.data.data;
                        } else {
                            this.$p_message(r.data.msg, "error");
                        }
                    });
                await this.myLikeList.forEach(item => {
                    let userParams = {
                        uid: item.user_id2,
                        token: this.token
                    };
                    this.axios
                        .post(this.APIHOST + "user/userinfo", userParams)
                        .then(r => {
                            if (r.data.data.img_path) {
                                item["headerImg"] = r.data.data.img_path
                            }
                            this.myNewLikeList.push(item);
                        });
                });
            },
            /*七天内投票数据 */
            getVoteRecord() {
                let voteRecordParams = {
                    user_id: this.$route.query.myPersonalId ?
                        this.$route.query.myPersonalId : this.$route.query.personalId,
                    token: this.token
                };
                this.axios
                    .post(this.APIHOST + "home/voteRecord", voteRecordParams)
                    .then(r => {
                        if (r.data.code == "0") {
                            r.data.data.forEach(item => {
                                this.dataWeek.push(item.num);
                                item.date = item.date.split("-")[2];
                                this.XDataWeekBefore.push(item.date);
                            });
                        }
                    })
                    .then(() => {
                        //   for (var i = 0; i < this.dataWeekBefore.length; i++) {
                        //     var s = 0;
                        //     for (var j = 0; j <= i; j++) {
                        //       s += this.dataWeekBefore[j];
                        //     }
                        //     this.dataWeek.push(s);
                        //   }
                        this.XDataWeekBefore.forEach(item => {
                            if (item.indexOf("0") == 0) {
                                item = item.split("")[1];
                            }
                            this.XDataWeek.push(item + "号");
                        });
                    });
            },
            /*echarts */
            drawEcharts(DataVal, DataDate) {
                let echartsBox = this.$echarts.init(
                    document.getElementById("echartsBox")
                );
                let Options = {
                    backgroundColor: new this.$echarts.graphic.RadialGradient(
                        0,
                        0,
                        2, [{
                                offset: 0,
                                color: "#4addd5" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#4497f2" // 100% 处的颜色
                            }
                        ],
                        false
                    ),
                    title: {
                        text: "",
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: 12,
                            color: "#F1F1F3"
                        },
                        left: "6%"
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            lineStyle: {
                                color: "#57617B"
                            }
                        }
                    },
                    /*控制画布内容上下左右边距 */
                    grid: {
                        left: "5%",
                        right: "2%",
                        bottom: "8%",
                        top: "20%",
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#ffffff"
                            },
                            show: false
                        },
                        data: DataDate,
                        axisLabel: {
                            interval: 0,
                            rotate: 0,
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    yAxis: [{
                        type: "value",
                        interval: this.likeNum / 2,
                        max: this.likeNum,
                        // splitNumber:4,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.4)" //"#86d2f2"
                            }
                        }
                    }],
                    series: [{
                        name: "票数",
                        type: "line",
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: "rgba(255,255,255,0.7)" // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(255,255,255,0)" // 100% 处的颜色
                                        }
                                    ],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: "rgba(228, 139, 76, 0.1)",
                                shadowBlur: 10
                            }
                        },
                        symbolSize: 4,
                        itemStyle: {
                            normal: {
                                color: "#b8e4fc"
                                // borderColor: "#e48b4c"
                            }
                        },
                        data: DataVal
                    }]
                };
                echartsBox.setOption(Options);
            },
            /*选择周数据 */
            selectMounth() {
                //   this.echartsSwtich = false;
                this.drawEcharts(this.dataWeek, this.XDataWeek);
            },
            /*选择日数据 */
            // selectWeek() {
            // //   this.echartsSwtich = true;
            //   this.drawEcharts(this.dataMounth, this.XDataMounth);
            // },
            /*判断是否是关注过的人 */
            // isQueryLike(){
            //     if(this.$route.query.isLike){
            //         this.likeStatus=false;
            //     }else{
            //         this.likeStatus=true;
            //     }
            // },
            /*关注的人页面 */
            toPersonalDetails(personalId) {
                if (this.$route.query.homeSpokesman) {
                    this.$router.push({
                        path: "/wx/personalDetails",
                        query: {
                            personalId: personalId,
                            selectCity: this.$route.query.selectCity,
                            homeSpokesman: "homeSpokesman",
                            isLike: 'isLike'
                        }
                    });
                } else {
                    this.$router.push({
                        path: "/wx/personalDetails",
                        query: {
                            personalId: personalId,
                            selectCity: this.$route.query.selectCity,
                            isLike: 'isLike'
                        }
                    });
                }
            },
            /*自己个人中心添加关注的人 */
            addLike() {
                if (this.$route.query.homeSpokesman) {
                    this.$router.push({
                        path: "/wx/selectPeople",
                        query: {
                            select: "select",
                            selectCity: this.$route.query.selectCity,
                            myPersonalId: this.$route.query.myPersonalId,
                            homeSpokesman: "homeSpokesman"
                        }
                    });
                } else {
                    this.$router.push({
                        path: "/wx/selectPeople",
                        query: {
                            select: "select",
                            selectCity: this.$route.query.selectCity,
                            myPersonalId: this.$route.query.myPersonalId
                        }
                    });
                }
            },
            /*别人个人中心添加关注*/
            addLikeTo() {
                let followmeParams = {
                    user_id: this.$route.query.personalId,
                    token: this.token
                };
                this.axios
                    .post(this.APIHOST + "user/followme", followmeParams)
                    .then(r => {
                        if (r.data.code === "0") {
                            //   this.likeStatus = false;
                            this.$p_message(r.data.msg, "success");
                        } else {
                            this.$p_message(r.data.msg, "error");
                        }
                    });
                // this.$router.push('/home')
            },
            /*微信分享 */
            async wxShare() {
                let _self = this;
                let WxConfig = {};
                let currentUrl = encodeURI(window.location.href.split('#')[0]);
                let wxShareUrl = window.location.href.split('#')[0] + "?share" + window.location.href.split("#")[1];
                let wxAuthParams = {
                    url: currentUrl,
                    token: this.token
                };
                await this.axios
                    .post(this.APIHOST + "home/wechatJssdk", wxAuthParams)
                    .then(r => {
                        if (r.data.code === "0") {
                            WxConfig = r.data.data;
                        }
                    });
                await weiXinConfig(WxConfig);
                weiXinShare("", wxShareUrl, "../../static/img/banner.jpg", "我为城市代言", _self);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import url(../assets/less/public.less);
    .personalDetails {
        position: relative;
        @font14();
        .goback {
            position: absolute;
            left: 30px;
            top: 30px;
            z-index: 9;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background: rgba(204, 204, 204, 0.3);
            img {
                width: 20px;
                margin-top: 8px;
                margin-left: -6px;
            }
        }
        .banner {
            width: 750px;
            position: relative;
            .banner_con{
height: 35vh; 
 overflow: hidden;
            }
            .banner_img {
                width: 100%;
                background: @config-bg5;
                display: block;
                object-fit: cover;
                margin-top: -100px;
            }
            .marginT{
                margin-top:0;
            }
            .header_img {
                position: absolute;
                width: 116px;
                height: 116px;
                border-radius: 116px;
                bottom: -58px;
                left: 50%;
                margin-left: -58px;
                background: @config-bg5;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
        }
        .echarts_box {
            width: 690px;
            height: 360px;
            background: @config-bg2;
            margin: 88px auto 74px;
            position: relative;
            .echarts_box_top {
                position: absolute;
                right: 0;
                left: 0;
                top: 20px;
                @flex();
                @justify5();
                padding: 0 30px;
                box-sizing: border-box;
                .echarts_title {
                    @color1();
                    z-index: 2;
                }
                .echarts_swtich_box {
                    z-index: 2;
                    @flex();
                    @justify1();
                    width: 80px;
                    height: 40px;
                    position: relative;
                    .echarts_text {
                        @flex();
                        @justify5();
                        @color1();
                        width: 66px;
                        position: absolute;
                        top: 2px;
                        left: 7px;
                        height: 36px;
                        line-height: 36px;
                        z-index: 4;
                    }
                    .echarts_swtich {
                        width: 100%;
                        height: 40px;
                        border-radius: 40px;
                        background: @config-bg8;
                        position: relative;
                        p {
                            width: 36px;
                            height: 36px;
                            border-radius: 36px;
                            background: @config-bg9;
                            position: absolute;
                            top: 2px;
                            left: 2px;
                        }
                        .pright {
                            left: auto;
                            right: 2px;
                        }
                    }
                }
            }
            #echartsBox {
                width: 690px;
                height: 360px;
            }
        }
        .my_like_box {
            background: @config-bg3;
            .my_like {
                padding: 0 30px;
                .my_like_title {
                    height: 100px;
                    padding: 46px 0 22px 0;
                    box-sizing: border-box;
                    text-align: left;
                    span {
                        margin-top: 46px;
                        padding-left: 10px;
                        border-left: 4px solid @config-bg4;
                        @color5();
                    }
                }
            }
            .noVoter{
                    background: none;
                    padding: 20px 40px;
                }
            .before_three_box {
                background: @config-bg2;
                li {
                    border-bottom: 2px solid @config-bg3;
                    .my_info {
                        background: @config-bg2;
                        height: 120px;
                        padding: 0 30px 0;
                        box-sizing: border-box;
                        @flex();
                        @justify5();
                        .my_info_con {
                            flex-grow: 1;
                            @flex();
                            @justify5();
                        }
                        .my_info_l {
                            @flex();
                            @justify1();
                            .img_url {
                                width: 72px;
                                height: 72px;
                                border-radius: 72px;
                                background: @config-bg3;
                                margin-right: 20px;
                                overflow: hidden;
                                img {
                                    width: 100%;
                                }
                            }
                            .my_info_l_r {
                                span {
                                    display: block;
                                    @font14();
                                    @color2();
                                    text-align: left;
                                }
                            }
                        }
                        .my_info_r {
                            @flex();
                            @justify3();
                            .link_num {
                                margin-right: 48px;
                                @font24();
                                @color3();
                            }
                            .addLike_r {
                                transform: rotate(180deg);
                            }
                            .yellow {
                                @color4();
                            }
                            .pointer {
                                width: 48px;
                                img {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
                li:last-child {
                    border-bottom: none;
                }
                
                .addLike {
                    padding: 0 30px;
                    height: 120px;
                    @flex();
                    @justify5();
                    .addLike_left {
                        @flex();
                        @justify1();
                        .addLike_left_box {
                            width: 72px;
                            @flex();
                            @justify2();
                            margin-right: 20px;
                            .addLike_icon {
                                width: 46px;
                                height: 46px;
                                border-radius: 46px;
                                border: 2px solid @config-bg10;
                                position: relative;
                                p {
                                    background: @config-bg11;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                }
                                p:first-child {
                                    width: 30px;
                                    height: 4px;
                                    margin-top: -2px;
                                    margin-left: -15px;
                                }
                                p:last-child {
                                    width: 4px;
                                    height: 30px;
                                    margin-top: -15px;
                                    margin-left: -2px;
                                }
                            }
                        }
                        .addLike_text {
                            @color2();
                        }
                    }
                    .addLike_r {
                        transform: rotate(180deg);
                    }
                }
                .before_three_list {
                    @flex();
                    @justify5();
                    box-sizing: border-box;
                    padding: 0 30px 0 0;
                    .my_info {
                        flex-grow: 1;
                        padding: 0;
                    }
                }
            }
            .add_one_like {
                width: 200px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                @color7();
                border: 2px solid @config-bg12;
                border-radius: 80px;
                margin: 40px auto;
            }
            .remove_one_like {
                border: 2px solid @config-bg14;
                @color5();
            }
        }
        .my_like_box_one {
            display: table;
            width: 100%;
            min-height: 400px;
        }
    }
</style>


